<template>
  <div id="login">
    <div class="login-box">
      <zc @ret="reBox">
        <button class="zc" @click="zc">注册</button>
      </zc>

      <dr @lgb="lgBox">
        <template v-slot:dtex
          ><input type="text" placeholder="用户账号" v-model="lgnum"
        /></template>
        <template v-slot:dpwd
          ><input type="password" placeholder="密码" v-model="lgpwd"
        /></template>
        <template v-slot:dr
          ><button class="dr" @click="dr">登录</button></template
        >
      </dr>
    </div>
  </div>
</template>

<script>
// 网络请求封装
import { request } from "../../network/request";
import prompt from "../../components/common/prompt/prompt";
import sql from "@/deliver/sql";
// import axios from "axios";
import qs from "qs";
import zc from "./zc/zc.vue";
import dr from "./dr/dr.vue";

export default {
  name: "login",
  data() {
    return {
      tips: "错误：信息不合法",
      number:
        /^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      pwd: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,200}$/,
      lgnum: "",
      lgpwd: "",
      login: 0,
    };
  },
  methods: {
    // 切换登录状态
    lgBox() {
      // this.login = this.login == 0 ? 0 : 1;
      if (this.login == 1) {
        $(".login-button").css("background-color", "rgba(250, 250, 250, 1)");
      }
      const lgBox = document.querySelector(".login-button");
      const reBox = document.querySelector(".login-conter");
      lgBox.classList.add("lg-box");
      reBox.classList.add("re-box");
      $(".index-register input").val("");
      $(".index-register div").css("opacity", "0");
    },
    // 切换注册状态
    reBox() {
      const lgBox = document.querySelector(".login-button");
      const reBox = document.querySelector(".login-conter");
      lgBox.classList.remove("lg-box");
      reBox.classList.remove("re-box");
    },
    //登录事件
    dr() {
      if (this.lgnum == "" || this.lgpwd == "") {
        prompt.ts(".dr", "账号或密码不可为空");
      } else if (this.lgnum.search(this.number) !== 0 && this.lgpwd !== 0) {
        // console.log("账号或密码不正确");
        prompt.ts(".dr", "账号或密码不正确");
      } else {
        let posts = { number: this.lgnum, pwd: this.lgpwd };
        // sql.dr(posts);
        request({
          url: "/admindr",
          method: "post",
          data: qs.stringify(posts),
        })
          .then((res) => {
            // console.log(res);
            if (res.status === 0) {
              this.$router.push("home");
              prompt.su(".dr", "登录成功");
            }
          })
          .catch((err) => {});
      }
    },
    zc() {
      const number =
        /^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      const pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,200}$/;
      const tex = $(".tex").val();
      const pwdVal = $(".pwd").val();
      const conVal = $(".conpwd").val();
      // console.log((tex.search(number) === 0));
      // console.log((pwdVal.search(pwd) == 0));
      // console.log( (pwdVal === conVal));
      let posts = "number=" + tex + "&pwd=" + pwdVal + "";
      if (tex == "" && pwdVal == "") {
        prompt.ts(".zc", "不允许为空");
      } else if (
        tex.search(number) === 0 &&
        pwdVal.search(pwd) === 0 &&
        pwdVal === conVal
      ) {
        sql.zc(posts);
      } else {
      }
    },
  },
  created() {
    $(document).ready(function () {
      $(".index-register input").focus(function () {
        var index = $(this).index();
        switch (index) {
          case 0:
            $(".ts").html("*请输入11位数字的手机号码");
            break;
          case 2:
            $(".ts").html("*请输入6到18的密码，且必须包含数与字母");
            break;
          case 4:
            $(".ts").html("*请再输入一次密码");
            break;
        }
      });

      $(".index-register input").blur(function () {
        $(".ts").html("");
      });

      $(".index-register input").keyup(function (e) {
        const number =
          /^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        const pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,200}$/;
        const pwdVal = $(".pwd").val();
        const conVal = $(".conpwd").val();
        let tex = $(this).val();
        let index = $(this).index() + 1;

        // console.log(tex);
        if (index === 1) {
          if (tex.search(number) == 0) {
            $(this).next().css("opacity", "1");
          } else {
            $(this).next().css("opacity", "0");
          }
        } else if (index === 3) {
          if (tex.search(pwd) == 0) {
            $(this).next().css("opacity", "1");
            if (pwdVal === conVal) {
              console.log(pwdVal, conVal);
              $(".conpwd").next("div").css("opacity", "1");
              $(".conpwd").prev("div").css("opacity", "1");
            } else {
              $(".conpwd").next("div").css("opacity", "0");
            }
          } else {
            $(".conpwd").next("div").css("opacity", "0");
            $(".conpwd").prev("div").css("opacity", "0");
          }
        } else {
          if (tex.search(pwd) == 0 && pwdVal == conVal) {
            $(this).next().css("opacity", "1");
          } else {
            $(".conpwd").next().css("opacity", "0");
          }
        }
      });

      $(".index-register input").focus(function (e) {
        let index = $(this).index() + 1;
        let ts = "Ts" + index;
        $("." + ts).show();
      });

      $(".index-register input").blur(function () {
        let index = $(this).index() + 1;
        let ts = "Ts" + index;
        $("." + ts).hide();
      });
    });
    $(window).resize(function () {
      var width = $(document).outerWidth();
      var height = $(document).outerHeight();
    });
  },
  components: {
    zc,
    dr,
  },
};
</script>

<style scoped>
@import url("./style.css");
</style>
